<template>
	<view class="huodong">
		<u-navbar ref="navbar" :border-bottom="false" :background="{'background': 'transparent'}" useBackIconName backIconColor="#ffffff"></u-navbar>
		<view class="container">
			<view class="no1-3 acea-row">
				<view class="item no2 acea-row row-middle row-column">
					<view class="yuan">
						<image class="avatar" src="../../../static/images/noticeDetail-student-default.png" mode=""></image>
						<image class="no_bg" src="../../../static/images/huodong01-no2.png" mode=""></image>
					</view>
					<text class="info-1">启xx育</text>
					<text class="info-2">李老师</text>
					<text class="info-3">课堂风采99次</text>
					<text class="info-4">作业发布88次</text>
				</view>
				<view class="item no1 acea-row row-middle row-column">
					<view class="yuan">
						<image class="avatar" src="../../../static/images/noticeDetail-student-default.png" mode=""></image>
						<image class="no_bg" src="../../../static/images/huodong01-no1.png" mode=""></image>
					</view>
					<text class="info-1">启xx育</text>
					<text class="info-2">李老师</text>
					<text class="info-3">课堂风采99次</text>
					<text class="info-4">作业发布88次</text>
				</view>
				<view class="item no3 acea-row row-middle row-column">
					<view class="yuan">
						<image class="avatar" src="../../../static/images/noticeDetail-student-default.png" mode=""></image>
						<image class="no_bg" src="../../../static/images/huodong01-no3.png" mode=""></image>
					</view>
					<text class="info-1">启xx育</text>
					<text class="info-2">李老师</text>
					<text class="info-3">课堂风采99次</text>
					<text class="info-4">作业发布88次</text>
				</view>
			</view>
			<view class="bangdan acea-row row-column">
				<view class="header acea-row row-middle row-between">
					<text class="title">榜单每日更新</text>
					<image src="../../../static/images/huangguan.png" mode=""></image>
				</view>
				<view class="list acea-row row-column">
					<view class="th acea-row row-middle">
						<text style="margin-left: 35rpx;">排名</text>
						<text style="margin-left: 22rpx;">机构名称</text>
						<text style="margin-left: 200rpx;">课堂风采(次)</text>
						<text style="margin-left: 25rpx;">作业发布(次)</text>
					</view>
					<view class="listContent">
						<view class="item acea-row row-middle" v-for="(item,index) in list" :key="index">
							<text class="paiming">04</text>
							<image class="avatar" src="../../../static/images/noticeDetail-student-default.png" mode=""></image>
							<view class="info acea-row row-column">
								<text class="line1">江西新余xx工学院</text>
								<text style="margin-top: 10rpx;color: #555555;font-size: 24rpx;">王老师</text>
							</view>
							<text class="fengcai">56</text>
							<text class="zuoye">20</text>
							<view class="bottom-line"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
			}
		}
	}
</script>

<style scoped>
	.huodong{
		background-color: #454655;
		max-height: 100vh;
		min-height: 100vh;
	}
	.huodong .container{
		position: absolute;
		top: 0;
		left: 0;
		min-height: 100vh;
		max-height: 100vh;
		width: 100%;
		background-image: url(../../../static/images/huodong01-bg.png);
		background-repeat: no-repeat;
		background-size: contain;
	}
	.huodong .container .no1-3{
		width: 690rpx;
		height: 353rpx;
		margin: 260rpx auto 0;
		position: relative;
		background: url(../../../static/images/huodong01-no-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.huodong .container .no1-3 .item{
		width: calc(690rpx / 3);
	}
	.huodong .container .no1-3 .item .info-1{
		margin-top: 16rpx;
		font-size: 26rpx;
		color: #d9d9dc;
	}
	.huodong .container .no1-3 .item .info-2{
		color: #cbcbce;
		font-size: 22rpx;
		margin-top: 5rpx;
	}
	.huodong .container .no1-3 .item .info-3{
		color: #f0c19b;
		font-size: 22rpx;
		margin-top: 22rpx;
	}
	.huodong .container .no1-3 .item .info-4{
		color: #f0c19b;
		font-size: 22rpx;
		margin-top: 15rpx;
	}
	.huodong .container .no1-3 .no2{
		height: 333rpx;
		margin-top: 20rpx;
	}
	.huodong .container .no1-3 .no1{
		height: 413rpx;
		margin-top: -40rpx;
	}
	.huodong .container .no1-3 .no3{
		height: 313rpx;
		margin-top: 40rpx;
	}
	.huodong .container .no1-3 .item .yuan{
		border-radius: 50%;
		position: relative;
	}
	.huodong .container .no1-3 .no2 .yuan{
		width: 108rpx;
		height: 108rpx;
		background: url(../../../static/images/huodong01-no2-yuan.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.huodong .container .no1-3 .no1 .yuan{
		width: 136rpx;
		height: 136rpx;
		background: url(../../../static/images/huodong01-no1-yuan.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.huodong .container .no1-3 .no3 .yuan{
		width: 108rpx;
		height: 108rpx;
		background: url(../../../static/images/huodong01-no3-yuan.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.huodong .container .no1-3 .item .yuan .avatar{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.huodong .container .no1-3 .item .yuan .no_bg{
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translateX(-50%);
		width: 160rpx;
		height: 45rpx;
	}
	.huodong .container .no1-3 .no2 .yuan .avatar{
		width: 100rpx;
		height: 100rpx;
	}
	.huodong .container .no1-3 .no1 .yuan .avatar{
		width: 128rpx;
		height: 128rpx;
	}
	.huodong .container .no1-3 .no3 .yuan .avatar{
		width: 100rpx;
		height: 100rpx;
	}
	
	.huodong .container .bangdan{
		border-radius: 15rpx;
		width: 690rpx;
		height: calc(100vh - 353rpx - 260rpx - 72rpx);
		background-color: #FFFFFF;
		overflow: hidden;
		margin: 24rpx auto 0;
	}
	.huodong .container .bangdan .header{
		padding: 0 30rpx;
		width: 100%;
		height: 100rpx;
		background-image: linear-gradient( 0deg, rgb(50,52,66) 0%, rgb(93,95,109) 100%);
	}
	.huodong .container .bangdan .header .title{
		color: #ffffff;
		font-size: 24rpx;
		margin-top: -20rpx;
	}
	.huodong .container .bangdan .header image{
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin-top: -20rpx;
	}
	.huodong .container .bangdan .list{
		margin-top: -20rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		overflow: hidden;
		flex: 1;
	}
	.huodong .container .bangdan .list .th{
		height: 65rpx;
		background-color: #f2f2f2;
		font-size: 22rpx;
		color: #9697a4;
		flex-wrap: nowrap;
	}
	.huodong .container .bangdan .list .listContent{
		flex: 1;
		overflow-y: scroll;
	}
	.huodong .container .bangdan .list .listContent .item{
		padding: 40rpx 20rpx 25rpx 30rpx;
		flex-wrap: nowrap;
		position: relative;
	}
	.huodong .container .bangdan .list .listContent .item .paiming{
		font-size: 34rpx;
		color: #333333;
		font-weight: 700;
		font-style: italic;
	}
	.huodong .container .bangdan .list .listContent .item .avatar{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-left: 25rpx;
	}
	.huodong .container .bangdan .list .listContent .item .info{
		font-size: 26rpx;
		color: #333333;
		margin-left: 20rpx;
		width: 220rpx;
	}
	.huodong .container .bangdan .list .listContent .item .fengcai{
		font-size: 28rpx;
		color: #333333;
		margin-left: 27rpx;
	}
	.huodong .container .bangdan .list .listContent .item .zuoye{
		font-size: 28rpx;
		color: #333333;
		margin-left: 115rpx;
	}
	.huodong .container .bangdan .list .listContent .item .bottom-line{
		position: absolute;
		right: 20rpx;
		bottom: 0rpx;
		width: 570rpx;
		height: 2rpx;
		background-color: #e5e5e5;
	}
</style>
